<template>
	<div class='admin'>
		<div class="top">
			<div>
				<img src="../img/logo.png" alt="">
				<span class="title">花瓣素材网——后台管理系统</span>
			</div>
			<div>
				<!-- <span class="admin_name" @click="layout">退出账号</span> -->
				<span class="admin_name">{{adminName}},你好</span>
			</div>
		</div>
		<div class="main">
			<div class="left">
				<div v-for='(el,index) in data'>
					<div class="zhankai" @click='menu(index)'>
						<span key="index" class="once">{{el.label}}</span>
						<span :class="['iconfont',el.open]"></span>
					</div>
					<div v-for='el2 in el.children[0]' class="two_box">
						<span @click="menuItem(el2)" class="two" v-if='el.isShow'>·{{el2}}</span>
						<!-- <span class="two" v-if='el.isShow'>·{{el2}}</span> -->
					</div>
					
				</div>
			</div>
			<div class="right">
				<keep-alive>
					<component :is='right_com'></component>
				</keep-alive>
				
				<!-- <router-view></router-view> -->
			</div>
		</div>
		<div style='width: 20px;height: 26px;'></div>
	</div>
	
</template>

<script setup>
	import {ref,reactive,onMounted} from 'vue'
	import adduser from '@/components/zjy/adduser.vue'
	import selectuser from '@/components/zjy/select_user.vue'
	import welcome from '@/components/zjy/welcome.vue'
	import shenhe from '@/components/zjy/shenhe.vue'
	import design from '@/components/zjy/design.vue'
	let adminName = ref('管理员')
	
	let data = reactive([
	  {
	    label: '管理用户',
		isShow: false,
		open:'icon-zhankai',
		component:'user',
	    children: [
	      {
			label1: '查询用户',
	        label2: '增加用户',
	      },
	    ],
	  },
	  {
	    label: '管理素材',
		isShow: false,
		open:'icon-zhankai',
		component:'sucai',
	    children: [
	      {
	  		label1: '设计趋势系列内容',
	        label2: '素材审核',
	      },
	    ],
	  },
	  {
	    label: '首页素材',
		isShow: false,
		open:'icon-zhankai',
		component:'index',
	    children: [
	      {
	  		label1: '行业灵感',
	        label2: '节日热点',
	        label3: '设计趋势',
	      },
	    ],
	  },
	])
	let menu = (index)=>{
		// 第一级菜单被点击后，让对应的二级菜单显示或隐藏
		let flag = data[index].isShow
		data[index] = { ...data[index], isShow: !flag }
		
		// 切换右边的展开图标
		if(data[index].open == 'icon-zhankai'){
			data[index] = { ...data[index], open: 'icon-shouqi' }
		}else{
			data[index] = { ...data[index], open: 'icon-zhankai' }
		}
	}
	
	// let right = ref('adduser')
	let right_com = ref(welcome)
	// 传不同的组件，动态组件
	let menuItem = (arg)=>{
		if(arg.includes('增加')){
			right_com.value = adduser
			console.log(right_com.adduser)
		}else if (arg.includes('查询')){
			right_com.value = selectuser
			console.log(right_com.value)
		}else if (arg.includes('审核')){
			right_com.value = shenhe
			console.log(right_com.value)
		}else if (arg.includes('系列')){
			right_com.value = design
			console.log(right_com.value)
		}
	}
	let islogin=ref("")
	onMounted(()=>{
		// 这里去获取登录的管理员信息，在页面显示用户名
		// islogin.value=window.sessionStorage.getItem("isLogin")||window.localStorage.getItem("isLogin")
		// if(!(islogin.value=='ok')){
		// 	alert("请先进行登录")
		// 	return
		// }
		// adminName.value = window.sessionStorage.getItem("uid")||window.localStorage.getItem("uid")
	})
	
	let layout = ()=>{
		// 点击清除缓存信息，从而退出登录
	}
</script>

<style scoped>
	@import url("//at.alicdn.com/t/c/font_4298666_7nt9bdflgwk.css");
	.admin {
		width: 100%;
		background-color: #f0e1e2;
		/* height: 1000px; */
		/* background-color: #E97E84; */
	}
	.top {
		width: 100%;
		height: 50px;
		display: flex;
		background-color: #000;
		padding: 0 30px;
		box-sizing: border-box;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 50px;
	}
	.top img {
		width: 30px;
		height: 30px;
	}
	.title,.admin_name {
		color:#F0A7AA;  /*设置文字颜色*/
		text-shadow: 0 8px 10px #f0b6bf;  /*设置文字阴影*/                  
		font-weight: bolder;  /*设置文字宽度*/                              
		text-align: center;  /*设置文字居中*/ 
	}
	.title {
		margin-left: 20px;
		font-size: 30px;   
	}
	.admin_name {
		font-size: 14px;  
		padding-left: 30px;
	}
	.main {
		width: 1200px;
		height: 540px;
		margin: 0 auto;
		/* border: 1px solid red; */
		display: flex;
	}
	.left {
		width: 200px;
		border: 1px solid #fe756b;
		font-size: 20px;
		color: #000;
		background-color: #fe756b;
	}
	.left>div {
		padding: 10px 20px 10px;
		border-bottom: 1px solid #fe3d3d;
	}
	.zhankai {
		display: flex;
		justify-content: space-between;
		align-items: center;
		cursor: pointer;
		/* border: 1px solid red; */
	}
	.zhankai~div {
		/* width: 100px; */
		/* border: 1px solid green; */
		margin-left: 30px;
	}
	.two_box:hover {
		cursor: pointer;
		background-color: #f0b6bf;
	}
	.two {
		font-size: 14px;
	}
	.right {
		width: 1000px;
		border: 1px solid red;
		background-color: #fde3e7;
		
		/* background-image: url('https://img1.baidu.com/it/u=1281463344,3755877325&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'); */
		/* background-size: cover; */
		/* background-position: center; */
		
	}
</style>